<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>帖子管理页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <!--引入我们在https://www.iconfont.cn平台生成的图标样式库-->
    <link rel="stylesheet" href="/layui/css/modules/layui-icon-extend/iconfont.css" media="all">
    <style>
    </style>
</head>
<body>
<!--条件搜索-->
<div id="searchParam">
    <div class="layui-form-item">
        <div class="layui-input-inline layui-form">
            <input type="text" id="title" class="layui-input" autocomplete="off" placeholder="标题">
        </div>
        <div class="layui-input-inline layui-form">
            <input type="text" name="publishUserName" id="publishUserName" autocomplete="off" class="layui-input" placeholder="作者">
        </div>
        <div class="layui-input-inline layui-form">
            <input type="text" class="layui-input" id="createTime" placeholder="发布时间">
        </div>
        <div class="layui-input-inline layui-form">
            <select name="bbsType" id="bbsType">
                <option value="">请选择类型</option>
                <option value="0">正常</option>
                <option value="1">置顶</option>
            </select>
        </div>
        <div class="layui-input-inline layui-form">
                <select name="state" id="state">
                    <option value="">请选择状态</option>
                    <option value="0">审核未通过</option>
                    <option value="1">审核中</option>
                    <option value="2">审核通过</option>
                </select>
        </div>
        <div class="layui-input-inline layui-form">
                <select name="postType" id="postType" >
                    <option value="">请选择分类</option>
                    <option value="1">社区广场</option>
                    <option value="2">情感天空</option>
                    <option value="3">顺风拼车</option>
                    <option value="4">二手买卖</option>
                    <option value="5">人生难题</option>
                    <option value="6">技术交流</option>
                    <option value="7">租房住房</option>
                </select>
        </div>
        <div class="layui-input-inline">
            <button class="layui-btn" id="search">
                <span class="layui-icon layui-icon-search"></span>查询
            </button>
        </div>
    </div>
</div>

<!--审核帖子-->
<div class="layui-row operation_div" id="checkPostDivId" style="display:none;">
    <form class="layui-form " action="" lay-filter="checkPostFilter" style="width: 700px;margin-top: 10px">
        <div class="layui-form-item">
            <label class="layui-form-label">ID</label>
            <div class="layui-input-block">
                <input type="hidden" name="publishUserId" id="publishUserId">
                <input type="id" name="id" readonly autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">分类</label>
            <div class="layui-input-block">
                <select name="postType" lay-filter="" id="postType2">
                    <!--1：社区广场；2：情感天空；3：顺风拼车；4：二手买卖；5：人生难题；6：技术交流；7：租房住房；-->
                    <option value="1">社区广场</option>
                    <option value="2">情感天空</option>
                    <option value="3">顺风拼车</option>
                    <option value="4">二手买卖</option>
                    <option value="5">人生难题</option>
                    <option value="6">技术交流</option>
                    <option value="7">租房住房</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input type="title" name="title" id="updateTitle" readonly autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form-label ">内容</div>
            <div class="layui-input-block">
                <textarea name="content" readonly class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form-label ">作者</div>
            <div class="layui-input-block">
                <input type="publishUserName" name="publishUserName" readonly autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form-label ">发帖时间</div>
            <div class="layui-input-block">
                <input type="publishTime" name="publishTime" readonly autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form-label ">帖子状态</div>
            <div class="layui-input-block">
                <select name="bbsType" id="updateBbsType">
                    <option value="">请选择</option>
                    <option value="0">正常</option>
                    <option value="1">置顶</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form-label ">新增积分</div>
            <div class="layui-input-block">
                <input type="point" name="point" id="addPoint" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="checkOK">审核通过</button>
                <button type="button" class="layui-btn layui-btn-danger" id="checkNO">审核不通过</button>
            </div>
        </div>
    </form>
</div>

<!--输入审核不通过理由-->
<div class="layui-row operation_div" id="checkPostNoDivId" style="display:none;">
    <form class="layui-form " action="" lay-filter="checkPostFilter" style="width: 700px;margin-top: 10px">
        <div class="layui-form-item">
            <label class="layui-form-label">常用理由</label>
            <div class="layui-input-block">
                <select id="checkNoReason" name="checkNoReason" class="select" lay-filter="checkNoReasonFilter">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form-label">驳回理由</div>
            <div class="layui-input-block">
                <textarea name="reason" id="reason" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="checkNOSubmit">提交</button>
            </div>
        </div>
    </form>
</div>

<table class="layui-hide" id="object_table" lay-filter="object_table" lay-skin="line"></table>
<div id="laypage" class="$('.layui-laypage-btn').click();"></div>
</body>

<script type="text/html" id="tool">
    <a class="layui-btn layui-btn-xs" lay-event="checkPost" shiro:hasPermission="bbs:post:updatePost">审核</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" shiro:hasPermission="bbs:post:deletePost">删除</a>
</script>

<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script>
    let $ = jQuery = layui.jquery;
    let table = layui.table
        , laypage = layui.laypage
        , form = layui.form
        , layer = layui.layer
        , laydate = layui.laydate
        , tree = layui.tree;
    layui.use(['table', 'laypage', 'layer', 'laydate', 'tree'], function () {

        //搜索条件
        let searchParam = {
            publishUserName: null,
            state: null,
            postType: null,
            bbsType: null,
            title: null,
            startTime: null,
            endTime: null,
            pageNum: 1,
            pageSize: 10
        };

        //监听驳回理由下拉选择框
        form.on('select(checkNoReasonFilter)', function (data) {
            $("#reason").val("");//先置空再赋值
            var optionObj = $("#checkNoReason option:selected");//获取选中的项
            var checkNoReasonText = optionObj.text();//获取选中项的文本信息
            $("#reason").val(checkNoReasonText);
        });

        //日期范围
        laydate.render({
            elem: '#createTime'
            , type: 'datetime'
            , range: '~'
            , done: function (value, date, endDate) {
                if (value != null && value != undefined && value != "") {
                    searchParam.startTime = value.split("~")[0];
                    searchParam.endTime = value.split("~")[1];
                } else {
                    //清空时间的时候要清空以前选择的日期
                    searchParam.startTime = null;
                    searchParam.endTime = null;
                }
            }
        });
        //执行查询条件
        $("#search").click(function () {
            searchParam.publishUserName = $("#publishUserName").val();
            searchParam.title = $("#title").val();
            searchParam.bbsType = $("#bbsType").val();
            searchParam.postType = $("#postType").val();
            searchParam.state = $("#state").val();
            searchParam.pageNum = 1;
            CoreUtil.sendAjax("/bbs/post/list", JSON.stringify(searchParam), function (res) {
                //初始化分页器
                laypageTable(res.data.totalRows, searchParam.pageNum);
                //初始化渲染数据
                if (res.data.list != null) {
                    loadTable(res.data.list);
                }
            }, "POST", false, function (res) {
                layer.msg(res.msg);
                let noAuthorityData = [];
                loadTable(noAuthorityData);
            });
        });

        //监听审核通过按钮
        $("#checkOK").click(function(){
            let params = {
                id: $("input[name='id']").val()
                ,reason: '' //置为空
                ,state: '2' //帖子状态（0：审核未通过；1：审核中；2:审核通过）
                ,title: $("#updateTitle").val()
                ,point: $("#addPoint").val()
                ,publishUserId: $("#publishUserId").val()
                ,bbsType: $("#updateBbsType").val()
                ,postType: $("#postType2").val()
            };
            CoreUtil.sendAjax("/bbs/post/updatePost", JSON.stringify(params), function (res) {
                layer.closeAll(); //疯狂模式，关闭所有层
                layer.msg(res.msg);
                $(".layui-laypage-btn").click();//刷新列表
            }, "PUT", false, function (res) {
                layer.msg(res.msg);
            });
        });

        //填充审核不通过理由下拉框
        let showCheckNoReason = function(){
            CoreUtil.sendAjax("/sys/dic/getSelectDicByTypeCode", null, function (res) {
                if(res != null && res.data != null && res.data.length > 0){
                    $.each(res.data, function(index, item){
                        if('BBS_REASON' == item.typeCode){
                            $("#checkNoReason").empty();//先清空
                            $("#checkNoReason").append(new Option("请选择驳回理由", ""));
                            if(item.dicInfo != null && item.dicInfo.length > 0){
                                $.each(item.dicInfo, function(index2, item2){
                                    //往下拉菜单里添加元素
                                    $('#checkNoReason').append(new Option(item2.dicValue, item2.dicCode));
                                });
                            }else{
                                $("#checkNoReason").append(new Option("暂无数据", ""));
                            }
                        }
                    });
                    form.render("select");//菜单渲染 把内容加载进去
                }else{
                    layer.msg("数据字典信息无数据");
                }
            }, "GET", false, function (res) {
                layer.msg(res.msg);
            });
        };

        //监听提交审核不通过驳回理由按钮
        $("#checkNOSubmit").click(function(){
            let params = {
                id: $("input[name='id']").val()
                ,reason: $("#reason").val() //审核不通过理由
                ,state: '0' //帖子状态（0：审核未通过；1：审核中；2:审核通过）
                ,title: $("#updateTitle").val()
                ,publishUserId: $("#publishUserId").val()
            };
            CoreUtil.sendAjax("/bbs/post/updatePost", JSON.stringify(params), function (res) {
                layer.closeAll(); //疯狂模式，关闭所有层
                layer.msg(res.msg);
                $(".layui-laypage-btn").click();//刷新列表
            }, "PUT", false, function (res) {
                layer.msg(res.msg);
            });
        });

        //监听审核不通过按钮
        $("#checkNO").click(function(){
            showCheckNoReason();
            layer.open({
                //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                type: 1,
                resize: false, //是否允许拉伸
                maxmin: false, //最大最小化
                title: "请输入审核不通过理由",
                area: ['70%', '70%'],
                shadeClose: true, //点击弹层外区域关闭
                content: $("#checkPostNoDivId") //引用的弹出层的页面层的方式加载修改界面表单
            });
        });

        $(document).ready(function(){
            //分页获取列表信息接口
            CoreUtil.sendAjax("/bbs/post/list", JSON.stringify(searchParam), function (res) {
                laypageTable(res.data.totalRows, searchParam.pageNum);
                if (res.data.list != null) {
                    loadTable(res.data.list);
                }
            }, "POST", false, function (res) {
                layer.msg(res.msg);
                let noAuthorityData = [];
                loadTable(noAuthorityData);
            });
        });


        //分页条
        let laypageTable = function (count, currentPage) {
            laypage.render({
                elem: 'laypage'
                , count: count
                , limit: searchParam.pageSize
                , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                , curr: location.hash.replace('#!currentPage=', '') //获取起始页
                , hash: 'currentPage' //自定义hash值
                , limits: [10, 25, 50, 100, 300, 500, 2000]
                , jump: function (obj, first) {
                    if (!first) {
                        searchParam.pageNum = obj.curr;
                        searchParam.pageSize = obj.limit;
                        CoreUtil.sendAjax("/bbs/post/list", JSON.stringify(searchParam), function (res) {
                            if (res.data.list != null) {
                                loadTable(res.data.list);
                                laypageTable(res.data.totalRows, searchParam.pageNum);
                            }
                        }, "POST", false, function (res) {
                            layer.msg(res.msg);
                            let noAuthorityData = [];
                            loadTable(noAuthorityData);
                        });
                    }
                }
            });
        };

        //渲染table
        let loadTable = function (data) {
            table.render({
                elem: '#object_table'
                , cols: [
                    [
                        {type: 'xuhao', fixed: 'left', title: '序号', width: 50, type: 'numbers'},
                        {
                            //1：社区广场；2：情感天空；3：顺风拼车；4：二手买卖；5：人生难题；6：技术交流；7：租房住房；
                            field: 'postType', title: '分类', width: 100, templet: function (item) {
                                if (item.postType === '1') {
                                    return '社区广场';
                                }
                                else if (item.postType === '2') {
                                    return '情感天空';
                                }
                                else if (item.postType === '3') {
                                    return '顺风拼车';
                                }
                                else if (item.postType === '4') {
                                    return '二手买卖';
                                }
                                else if (item.postType === '5') {
                                    return '人生难题';
                                }
                                else if (item.postType === '6') {
                                    return '技术交流';
                                }
                                else if (item.postType === '7') {
                                    return '租房住房';
                                }
                                else {
                                    return '未知';
                                }
                            }
                        },
                        {field: 'title', title: '标题', width: 200},
                        {
                            field: 'state', title: '状态', width: 110, templet: function (item) {
                                if (item.state === '1') {
                                    return '<span class="layui-badge layui-bg-orange">审核中</span>';
                                }
                                else if (item.state === '0') {
                                    return '<span class="layui-badge">审核未通过</span>';
                                }
                                else if (item.state === '2') {
                                    return '<span class="layui-badge layui-bg-green">审核通过</span>';
                                }
                                else {
                                    return '<span class="layui-badge layui-bg-blue">未知</span>';
                                }
                            }
                        },
                        {
                            field: 'bbsType', title: '类型', width: 100, templet: function (item) {
                                if (item.bbsType === '1') {
                                    return '<span class="layui-badge layui-bg-orange">置顶</span>';
                                }
                                else if (item.bbsType === '0') {
                                    return '<span class="layui-badge layui-bg-green">正常</span>';
                                }
                                else {
                                    return '<span class="layui-badge layui-bg-blue">未知</span>';
                                }
                            }
                        },
                        {field: 'content', title: '内容', width: 260, event: 'postContent', style:'cursor: pointer;'},
                        {field: 'publishUserName', title: '作者', width: 180, sort: false},
                        {field: 'publishTime', title: '发布时间', width: 160, sort: true},
                        {field: 'readCount', title: '阅读量', width: 100, sort: true},
                        {field: 'goodCount', title: '点赞量', width: 100, sort: true},
                        {field: 'reason', title: '审核驳回原因', sort: false, minWidth: 260},
                        {field: 'updateUserIdName', title: '更新人', sort: false, minWidth: 100},
                        {field: 'updateTime', title: '更新时间', sort: true, minWidth: 160},
                        {width: 200, toolbar: "#tool", title: '操作', fixed: 'right'}
                    ]
                ]
                , data: data
                , loading: true
                , even: true
                , limit: data.length
                // , toolbar: '#toolbar'
            });
        };

        //监听行工具事件
        table.on('tool(object_table)', function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case 'del':
                    sureDelete(data.id);//删除帖子
                    break;
                case 'checkPost':
                    checkPostOper(data);//审核帖子
                    break;
                case 'postContent':
                    checkPostOper(data);//审核帖子
                    break;
            }
        });

        //审核帖子
        let checkPostOper = function(data){
            layer.open({
                //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                type: 1,
                resize: false, //是否允许拉伸
                maxmin: false, //最大最小化
                title: "审核帖子",
                area: ['80%', '99%'],
                shadeClose: true, //点击弹层外区域关闭
                content: $("#checkPostDivId") //引用的弹出层的页面层的方式加载修改界面表单
            });
            //填充数据
            form.val("checkPostFilter", {
                "title": data.title
                , "id": data.id
                , "content": data.content
                , "publishTime": data.publishTime
                , "publishUserName": data.publishUserName
                , "postType": data.postType
                , "bbsType": data.bbsType
                , "publishUserId": data.publishUserId
                , "point": ''
            });
        };

        //是否删除确认框
        let sureDelete = function (pkId, roleName) {
            layer.open({
                content: '确定要删除该记录吗?',
                yes: function (index, layero) {
                    layer.close(index); //如果设定了yes回调，需进行手工关闭
                    CoreUtil.sendAjax("/bbs/deletePost/" + pkId, null, function (res) {
                        layer.msg(res.msg);
                        $(".layui-laypage-btn").click();
                    }, "DELETE", false);
                }
            });
        };
    });
</script>